<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>基线数据采集分析云平台</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="jquery/jquery-3.5.1.js"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">基线分析云平台</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>

            <li class="layui-nav-item layui-hide-xs"><a href="">日志系统</a></li>
            <li class="layui-nav-item layui-hide-xs"><a href="">扩展系统</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">扩展组件</a>
                <dl class="layui-nav-child">
                    <dd><a href="">扩展组件01</a></dd>
                    <dd><a href="">扩展组件02</a></dd>
                </dl>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a href="javascript:;">
                    <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
                    tester
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="changeAvatar.html">头像修改</a></dd>
                    <dd><a href="personalInfo.html">个人信息</a></dd>
                    <dd><a href="logout">退出</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">用户信息管理</a>
                    <dl class="layui-nav-child">
                        <dd class="layui-this"><a href="user.html">用户列表管理</a></dd>
                        <dd><a href="javascript:;">部门列表管理</a></dd>
                        <dd><a href="javascript:;">权限列表管理</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">menu group 2</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">list 1</a></dd>
                        <dd><a href="javascript:;">list 2</a></dd>
                        <dd><a href="">超链接</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="javascript:;">click menu item</a></li>
                <li class="layui-nav-item"><a href="">the links</a></li>
            </ul>
        </div>
    </div>

    <div class="layui-body"  style="margin-top: 10px; margin-left: 10px; margin-right: 10px">
        <!-- 面包屑导航 -->
        <span class="layui-breadcrumb">
          <a href="index.html">首页</a>
          <a><cite>用户信息管理</cite></a>
          <a><cite>用户列表管理</cite></a>
        </span>

        <!-- 水平线 -->
        <hr class="layui-bg-blue">

        <!-- 搜索条件 -->
        <fieldset class="layui-elem-field">
            <legend>筛选条件</legend>
            <div class="layui-field-box">
                <div class="layui-form-item layui-form-pane">   <!--  每一个这样的div代表一个面板状态 每一个面板会自动换行 -->
                    <label class="layui-form-label">用户名称</label>
                    <div class="layui-input-inline">
                        <input type="text" id="search_username" placeholder="模糊查询用户名称" class="layui-input">
                    </div>
                    <label class="layui-form-label">手机号</label>
                    <div class="layui-input-inline">
                        <input type="text" id="search_phone" placeholder="模糊查询手机号" class="layui-input">
                    </div>

                    <label class="layui-form-label">登陆时间</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="search_last_login_time" placeholder=" - ">
                    </div>



                    <div class="layui-inline">
                        <button class="layui-btn layui-btn-radius layui-btn-warm" id="iReset">重置</button>
                        <button class="layui-btn layui-btn-radius layui-btn-normal" id="searchVal">搜索</button>
                    </div>
                </div>
            </div>
        </fieldset>

        <table class="layui-hide" id="test" lay-filter="test"></table>

        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="insert_data">新增用户</button>
            </div>
        </script>

        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>

        <script type="text/html" id="insert_form">
            <div class="layui-field-box">
                <div class="layui-form-item layui-form-pane">
                    <label class="layui-form-label">用户名称</label>
                    <div class="layui-input-inline">
                        <input type="text" id="insert_username" class="layui-input">
                    </div>
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-inline">
                        <input type="password" id="insert_password" class="layui-input">
                    </div>
                </div>
            </div>
        </script>

        <script type="text/html" id="update_form">
            <div class="layui-field-box">
                <div class="layui-form-item layui-form-pane">
                    <label class="layui-form-label">用户名称</label>
                    <div class="layui-input-inline">
                        <input type="text" id="update_username" class="layui-input" readonly>
                    </div>
                    <label class="layui-form-label">手机号</label>
                    <div class="layui-input-inline">
                        <input type="text" id="update_phone" class="layui-input">
                    </div>
                    <label class="layui-form-label">登录时间</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="update_last_login_time" placeholder="yyyy-MM-dd HH:mm:ss">
                    </div>
                </div>
            </div>
        </script>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © copyright 2021-2030  www.scdx.com  四川大学网络基线检查分析云平台
    </div>
</div>

<script src="layui/layui.js"></script>
<script>
    $(function () {
        $("#iReset").click(function () {
            $("#search_username").val("");
            $("#search_phone").val("");
            $("#search_last_login_time").val("");
            search();
        });

        $("#searchVal").click(function () {
            var search_username = $("#search_username").val();
            var search_phone = $("#search_phone").val();
            var search_last_login_time = $("#search_last_login_time").val();
            search(search_username, search_phone, search_last_login_time);
        });


        search();
        function search(search_username, search_phone, search_last_login_time) {
            // 响应式  也就是适配不同的分辨率
            layui.use('table', function(){
                var table = layui.table;
                var json = {};
                if(search_username != null && search_username !== "")
                    json.search_username = search_username;
                if(search_phone != null && search_phone !== "")
                    json.search_phone = search_phone;
                if(search_last_login_time != null && search_last_login_time !== "")
                    json.search_last_login_time = search_last_login_time;

                table.render({   // 渲染table数据表格
                    elem: '#test'
                    ,url:'/user/selectForPage'
                    ,where:json  // 添加的请求参数
                    ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                    ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                        title: '提示'
                        ,layEvent: 'LAYTABLE_TIPS'
                        ,icon: 'layui-icon-tips'
                    }]
                    ,title: '用户表数据'
                    ,cols: [[
                        {type: 'checkbox', fixed: 'left'}
                        ,{field:'id', title:'ID', width:100, fixed: 'left', unresize: true, sort: true, type: "numbers"}
                        ,{field:'username', title:'用户名称', width:300, unresize: true, templet:function (res) {
                                return '<em>'+ res.username +'</em>'
                            }}
                        ,{field:'password', title:'用户密码', width:300, unresize: true, templet:function (res) {
                                return '<em>'+ res.password +'</em>'
                            }}
                        ,{field:'phone', title:'手机号', width:300, unresize: true, templet:function (res) {
                                return '<em>'+ res.phone +'</em>'
                            }}
                        ,{field:'lastLoginTime', title:'最后登录时间', width:300, unresize: true, templet:function (res) {
                                return '<em>'+ res.lastLoginTime +'</em>'
                            }}

                        ,{field:'departmentName', title:'部门名称', width:300, unresize: true, templet:function (res) {
                                return '<em>'+ res.department.departmentName +'</em>'
                            }}
                        ,{field:'roleName', title:'权限名称', width:300, unresize: true, templet:function (res) {
                                return '<em>'+ res.role.roleName +'</em>'
                            }}
                        ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
                    ]]
                    ,page: {limits:[10], prev:"上一页", next:"下一页"}
                    ,done: function (res, page, count) {
                        console.log(res);
                        console.log(page);
                        console.log(count);
                    }
                });

                //头工具栏事件
                table.on('toolbar(test)', function(obj){
                    var checkStatus = table.checkStatus(obj.config.id);
                    switch(obj.event){
                        case 'insert_data':
                            // layer.msg("新增数据");
                            //弹出表单
                            layer.open({
                                type: 1
                                ,title: '新增用户'         //不显示标题栏
                                ,closeBtn: false
                                ,area: ['400px','300px']  // 宽和高
                                ,shade: 0.8               // 透明度
                                ,id: 'LAY_layuipro'       //设定一个id，防止重复弹出
                                ,btn: ['新增', '取消']    // 两个按钮显示的文字内容
                                ,btnAlign: 'c'
                                ,moveType: 1             //拖拽模式，0或者1
                                ,content: $('#insert_form').html()// 引入自定义表单
                                ,btn1: function(index, layero){
                                    var username = $("#insert_username").val();
                                    var password = $("#insert_password").val();
                                    $.ajax({   // 异步请求   想象成线程状态
                                        url:"/shiro/register",   // 请求路径
                                        type:"post",            // 请求的方式，不区分大小写   传递json不能使用get请求，否则返回400错误
                                        datatype:"text",
                                        data: {
                                            username:username,
                                            password:password
                                        },
                                        success:function(response){                        // 后台服务响应成功，自动返回数据
                                            if(response.code == 200) {
                                                // 关闭弹出框
                                                layer.close(index);
                                                alert("用户创建成功!");
                                                search();
                                            }
                                        },
                                        error:function(response){             // 网络请求失败，自动调用此方法
                                            console.log("出错" + response);
                                            layer.close(index);   // 关闭当前对话框
                                        }
                                    });

                                }
                                ,success: function(layero){

                                }
                            });
                            break;

                        //自定义头工具栏右侧图标 - 提示
                        case 'LAYTABLE_TIPS':
                            layer.alert('这是工具栏右侧自定义的一个图标按钮');
                            break;
                    };
                });

                //监听行工具事件
                table.on('tool(test)', function(obj){
                    var data = obj.data;   // layui返回的当前行中的json对象数据
                    //console.log(obj)
                    if(obj.event === 'del'){
                        layer.confirm('确定删除吗?', function(index){
                            $.ajax({   // 异步请求   想象成线程状态
                                url:"/admin/deleteById",   // 请求路径
                                type:"post",               // 请求的方式，不区分大小写   传递json不能使用get请求，否则返回400错误
                                datatype:"text",
                                // request中传递的key-value值
                                data:{
                                    id:data.id
                                },
                                success:function(response){                        // 后台服务响应成功，自动返回数据
                                    if(response.code === 200) {
                                        layer.close(index);   // 关闭当前对话框
                                        alert("删除成功!");
                                        search();
                                    }
                                    else {
                                        alert("删除失败，请稍后重试!");
                                    }
                                },
                                error:function(response){             // 网络请求失败，自动调用此方法
                                    console.log("出错" + response);
                                    layer.close(index);   // 关闭当前对话框
                                }
                            });
                        });
                    } else if(obj.event === 'edit'){
                        //弹出表单
                        layer.open({
                            type: 1
                            ,title: '更新用户'         //不显示标题栏
                            ,closeBtn: false
                            ,area: ['400px','300px']  // 宽和高
                            ,shade: 0.8               // 透明度
                            ,id: 'LAY_layuipro'       //设定一个id，防止重复弹出
                            ,btn: ['更新', '取消']    // 两个按钮显示的文字内容
                            ,btnAlign: 'c'
                            ,moveType: 1             //拖拽模式，0或者1
                            ,content: $('#update_form').html()// 引入自定义表单
                            ,btn1: function(index, layero){
                                var update_phone = $("#update_phone").val();
                                var update_last_login_time = $("#update_last_login_time").val();

                                $.ajax({   // 异步请求   想象成线程状态
                                    url:"/user/updateById",   // 请求路径
                                    type:"post",               // 请求的方式，不区分大小写   传递json不能使用get请求，否则返回400错误
                                    contentType:"application/json;charset=utf-8",
                                    datatype:"text",
                                    // request中传递的key-value值
                                    data:JSON.stringify({
                                        id:data.id,
                                        phone:update_phone,
                                        lastLoginTime:update_last_login_time
                                    }),
                                    success:function(response){                        // 后台服务响应成功，自动返回数据
                                        if(response.code === 200) {
                                            layer.close(index);   // 关闭当前对话框
                                            alert("更新成功!");
                                            search();
                                        }
                                        else {
                                            alert("更新失败，请稍后重试!");
                                        }
                                    },
                                    error:function(response){             // 网络请求失败，自动调用此方法
                                        console.log("出错" + response);
                                        layer.close(index);   // 关闭当前对话框
                                    }
                                });
                                // 关闭弹出框
                                layer.close(index);
                            }
                            ,success: function(layero){
                                $("#update_username").val(data.username);
                                $("#update_phone").val(data.phone);
                                $("#update_last_login_time").val(data.lastLoginTime);
                            }
                        });
                    }
                });
            });
        }
    });
</script>

<script>
    layui.use('laydate', function(){
        var laydate = layui.laydate;
        //日期时间范围
        laydate.render({
            elem: '#search_last_login_time'
            ,type: 'datetime'
            ,range: true
        });
        laydate.render({
            elem: '#update_last_login_time'
            ,type: 'datetime'
        });
    });
</script>

<script>
    //JS
    layui.use(['element', 'layer', 'util'], function(){
        var element = layui.element
            ,layer = layui.layer
            ,util = layui.util
            ,$ = layui.$;

        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function(othis){
                layer.msg('展开左侧菜单的操作', {icon: 0});
            }
            ,menuRight: function(){
                layer.open({
                    type: 1
                    ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                    ,area: ['260px', '100%']
                    ,offset: 'rt' //右上角
                    ,anim: 5
                    ,shadeClose: true
                });
            }
        });

    });
</script>
</body>
</html>